<template>
  <div class="info-page">
    <h2>用户信息</h2>
    <button @click="$router.push('/login')">返回登录页</button>
    <div class="info-content" v-if="user">
      <p>ID：{{ user.id }}</p>
      <p>用户名：{{ user.username }}</p>
      <p>邮箱：{{ user.email }}</p>
      <button @click="updateEmail">修改邮箱</button>
    </div>
    <p v-else>请先登录获取用户信息</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import request from '@/utils/request';

const route = useRoute(); // 获取路由参数（从登录页携带的用户名）
const user = ref(null); // 存储后端返回的用户信息

// 页面加载时自动获取用户信息
onMounted(async () => {
  const username = route.query.username; // 从路由参数中读取用户名
  if (username) {
    // 调用后端 GET 接口，传递用户名参数
    user.value = await request.get('/info', { params: { username } });
  }
});

// 模拟修改邮箱（需后端提供 /user/update 接口，若未实现可注释）
const updateEmail = async () => {
  const newEmail = prompt('请输入新邮箱：', user.value?.email || '');
  if (newEmail && user.value) {
    await request.post('/user/update', {
      username: user.value.username,
      email: newEmail
    });
    user.value.email = newEmail; // 本地更新页面渲染（无需刷新）
    alert('邮箱更新成功！');
  }
};
</script>

<style scoped lang="less">
.info-page {
  width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #eee;
  .info-content { margin: 20px 0; line-height: 1.8; }
  button { margin: 5px; padding: 8px 16px; background: #42b983; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
}
</style>